<template>
    <div class="left4">
        <section class="section">
            <div class="section__title">
                <span>车险出单品牌占比</span>
                <span>服务包出单品牌占比</span>
            </div>
            <div class="table-box">
                <div class="table-wrapper">
                    <div class="table-body-scroll" ref="scrollContainer">
                    <table class="table unified-table" :class="{ scroll: extendedData.length > 5 }">
                        <colgroup>
                        <col width="10%"/>   <!-- 百分比 -->
                        <col width="10%"/>   <!-- 数量 -->
                        <col width="20%"/>  <!-- 图形1 -->
                        <col />            <!-- 品牌（自适应） -->
                        <col width="20%"/>  <!-- 图形2 -->
                        <col width="10%"/>   <!-- 数量 -->
                        <col width="10%"/>   <!-- 百分比 -->
                    </colgroup>
                        <thead>
                        <tr>
                            <th class="alignRight">百分比</th>
                            <th class="alignRight">数量</th>
                            <th ></th>
                            <th class="alignCenter">品牌</th>
                            <th></th>
                            <th>数量</th>
                            <th>百分比</th>
                        </tr>
                        </thead>
                        <tbody ref="scrollContent">
                        <tr v-for="(item, index) in extendedData" :key="index">
                            <td class="alignRight">{{ item.percentage1 }}%</td>
                            <td class="alignRight">{{ item.value1 }}</td>
                            <td>
                            <div class="bar-wrapper bar-wrapper--reverse">
                                <div class="bar" :style="barStyle(item.percentage1Bar,['#6BC1FF','#B634E8'])"></div>
                            </div>
                            </td>
                            <td class="alignCenter">{{ item.brand }}</td>
                            <td>
                            <div class="bar-wrapper">
                                <div class="bar" :style="barStyle(item.percentage2Bar, ['#23C7BB', '#D4FC64'])"></div>
                            </div>
                            </td>
                            <td>{{ item.value2 }}</td>
                            <td>{{ item.percentage2 }}%</td>
                        </tr>
                        </tbody>
                    </table>
                    </div>
                </div>
            </div>
        </section>
        <section class="section">
            <div class="section__title">
                <span>服务包产品销量Top5</span>
            </div>
            <div class="table-box">
                <div class="table-wrapper">
                    <div class="table-body-scroll" ref="scrollContainer2">
                        <table class="table unified-table" :class="{ scroll: extendedTop5List.length > 5 }">
                            <thead>
                                <tr>
                                    <th class="alignCenter">名称</th>
                                    <th class="alignCenter">数量</th>
                                    <th class="alignCenter">百分比</th>
                                </tr>
                            </thead>
                            <tbody ref="scrollContent2">
                                <tr v-for="(item, index) in extendedTop5List" :key="index">
                                    <td class="alignCenter">{{ item.name }}</td>
                                    <td class="alignCenter">{{ item.value }}</td>
                                    <td class="alignCenter">{{ item.percentage}}%</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';

//随机数据
const randValue= (number=100) => {
  return Math.round(Math.random() * number)
}

//模拟数据-车险/服务包出单品牌占比
const data = ref([
  { brand: '品牌1xxxxxxxxxx', value1: randValue(), value2: randValue() },
  { brand: '品牌xxxxx', value1:randValue(), value2: randValue() },
  { brand: '品牌2xxxxx', value1: randValue(), value2: randValue() },
  { brand: '品牌3xxxxx', value1: randValue(), value2: randValue() },
  { brand: '品牌4xxxxx', value1: randValue(), value2: randValue() },
  { brand: '品牌5', value1: randValue(), value2:randValue() },
  { brand: '品牌6gssfasfsf', value1: randValue(), value2: randValue() },
  { brand: '品牌6xxxxx', value1: randValue(), value2: randValue() },
  { brand: '品牌7', value1: randValue(), value2:randValue() },
  { brand: '品牌8gsdfssfsf', value1: randValue(), value2:randValue() },
  
]);
//模拟数据-服务包产品销量Top5
const Top5List=ref([
    { name: '服务包产品名A', value:randValue(100000)},
    { name: '服务包产品名B', value: randValue(100000)},
    { name: '服务包产品名C', value: randValue(100000)},
    { name: '服务包产品名DD', value: randValue(100000)},
    { name: '服务包产品名EEE', value: randValue(100000)},
    { name: '服务包产品名F', value:randValue(100000)},
])

/** 计算属性 */
const useData = computed(() => {
  const sum1 = data.value.reduce((acc, current) => acc + current.value1, 0);
  const sum2 = data.value.reduce((acc, current) => acc + current.value2, 0);
  const max1 = Math.max(...data.value.map(item => item.value1)) / sum1 //求最大的比例作为归一化
  const max2 = Math.max(...data.value.map(item => item.value2)) / sum2 //求最大的比例作为归一化
  return data.value.sort((a,b)=>b.value1-a.value1)//降序
    .map(item => ({
    brand: item.brand,
    value1: item.value1,
    percentage1: ((item.value1 / sum1) * 100 ).toFixed(),
    percentage1Bar:((item.value1 / sum1) / max1 * 100 ).toFixed(),//作图的数据
    value2: item.value2,
    percentage2: ((item.value2 / sum2) * 100 ).toFixed(),
    percentage2Bar:((item.value2 / sum2) / max2 * 100 ).toFixed(),//作图的数据
  }));
});


const useTop5List=computed(()=>{
    const sum = Top5List.value.reduce((acc, current) => acc + current.value, 0);
    return Top5List.value.map(item=>({
        name:item.name,
        value:item.value,
        percentage:((item.value/sum)*100).toFixed(),
    }))
})
const extendedData=computed(()=>{
  if (useData.value.length<=5){
    return [...useData.value]
  }else{
    return [...useData.value,...useData.value]
  }
})

const extendedTop5List=computed(()=>{
  if (useTop5List.value.length<=5){
    return [...useTop5List.value]
  }else{
    return [...useTop5List.value,...useTop5List.value]
  }
})

const scrollContainer = ref(null);
const scrollContent = ref(null);
const scrollContainer2 = ref(null);
const scrollContent2 = ref(null);

function setupAutoScroll(containerRef, contentRef, speed = 100) {
  let offset = 0;
  setInterval(() => {
    const container = containerRef.value;
    const content = contentRef.value;
    if (!container || !content) return;
    offset++;
    if (offset >= content.scrollHeight / 2) {
      offset = 0;
    }
    container.scrollTop = offset;
  }, speed);
}


onMounted(() => {
  setupAutoScroll(scrollContainer, scrollContent, 100);
  setupAutoScroll(scrollContainer2, scrollContent2, 100);
});
// 生成柱状图样式的函数：根据百分比设置宽度和渐变色
const barStyle = (percentage, colors) => ({
  width: percentage + '%',
  background: `linear-gradient(to right, ${colors.join(', ')})`
});
</script>

<style lang="scss" scoped>
@import "../../assets/style/main.scss";
$color-border:#494949;
.left4{
    position: relative;
    display: flex;
}
.section{
    margin-top: 7px;
    width: 90%;
    &:nth-of-type(2){//第2个section
        position: absolute !important;
        top: 0;
        left:95%;
        width: 42%;
    }
}
.table-box{//table容器
    width: 100%;
    height: 16.9rem;
    border-top: 1px solid $color-border;
    border-bottom: 1px solid $color-border;
    background-color: rgba(#00030a,0.6);
}

.table-wrapper {//整个table容器
  width: 100%;
  height: 98%;
  font-family: sans-serif;
  font-size: 1rem;
  font-weight: 100;
  box-sizing: border-box;
  overflow: hidden;
}

.table-body-scroll {//滚轴
  height: 100%;
  overflow: auto;
  /* 隐藏滚动条 */
  scrollbar-width: none;//Firefox
  -ms-overflow-style: none;//IE 10+ 
  &::-webkit-scrollbar {
    display: none; //Chrome, Safari
  }
}
.unified-table {//table样式
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  table-layout: auto;
    th,td {//单元格
        padding: 0 5px;
        text-align: left;
        // border: 1px solid #ccc;
        white-space: nowrap
    }
   thead th {//标题
        position: sticky;
        top: 0;
        background: #0b0b0c;
        z-index: 2;
        text-align: left;
    }
}
//如果该表格是滚播的，则设置单元格padding为5px，让每一行有点距离
.unified-table.scroll{
    th,td {//单元格
        padding: 5px;
    }
}

.bar-wrapper {//柱形图容器
  height:.6rem;
  border-radius: .2rem;
  overflow: hidden;
  display: flex;
//   background: #e0e0e0; //柱形图底色    
    .bar {
        height: 100%;
        border-radius: .4rem;
    }
    &--reverse {//相反
        justify-content: flex-end;
    }
}


.alignRight{//文本偏右
    text-align: right;
}
.alignCenter{//文本居中
    text-align: center;
}



</style>